<template>
    <div>
        <nav-bar>
            <template v-slot:dedault>新用户注册</template>
        </nav-bar>
        <div style="margin-top: 50px; padding-top: 40px;">
            <div style="text-align: center;">
                <van-image
                    width="10rem"
                    height="10rem"
                    fit="contain"
                    src="https://ts1.cn.mm.bing.net/th/id/R-C.a266002281783c4f91945b125c395dc4?rik=0LvPjyhfF89mSQ&riu=http%3a%2f%2fpic.616pic.com%2fys_bnew_img%2f00%2f07%2f03%2f8c7hBGzTVK.jpg&ehk=vRz331CWilgQSMor9H8bq9ZrUYBzMTGHgcI23h%2brhU0%3d&risl=&pid=ImgRaw&r=0"
                />
            </div>
            <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field
                v-model="email"
                name="邮箱"
                label="邮箱"
                placeholder="邮箱"
                :rules="[{required:true,message:'请填写邮箱'}]"
                />
                <van-field
                v-model="password"
                type="password"
                name="密码"
                label="密码"
                placeholder="密码"
                :rules="[{required:true,message:'请填写密码'}]"
                />
                
               
                </van-cell-group>
               <div style="margin: 16px;">
                <div class="link-login" @click="$router.push({path:'/register'})">
                    没有账号，立即注册
                </div>
                <van-button round block type="success" native-type="submit">
                    提交
                </van-button>
               </div>
                
                </van-form>
        </div>
    </div>
</template>
<script>
import NavBar from '@/components/common/NavBar/NavBar.vue';
import {ref,reactive,toRefs} from "vue";
import { login } from '@/network/user';
import { Toast } from 'vant';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
export default{
    name:"Login",
    components:{
        NavBar
    },
    setup(){
        const router = useRouter();
        const store=useStore();
        const userinfo = reactive({
            email:"",
            password:"",
        });
        const onSubmit=()=>{
            console.log("23");
            login(userinfo).then(res=>{
                // console.log(res.access_token);
                // 将token保存在本地window.localStorage setItem(key,value) getItem(key)
                window.localStorage.setItem('token',res.access_token);
                // 在vuex isLogin
                store.commit('setIsLogin',true);
                Toast.success('登入成功');
                userinfo.email='';
                userinfo.password='';
                setTimeout(()=>{
                    router.push('/home');

                },500);
            })
        }
        return{
            ...toRefs(userinfo),
            onSubmit
        }

    }
}
</script>
<style>
.link-login{
    font-size: 14px;
    margin-bottom: 20px;
    color: #42b983;
}
</style>